<!--
 * @Author: MarioGo
 * @Date: 2021-11-06 00:05:01
 * @LastEditTime: 2021-11-06 13:40:30
 * @LastEditors: MarioGo
 * @Description: 文件描述
 * @FilePath: /zheye/src/demo/basic.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div>
    <h1>hello</h1>
    <h2>数字 {{ count }}</h2>
    <h2>数组</h2>
    <ul>
      <li v-for="item in nubmers" :key="item">{{ item }}</li>
    </ul>
    <button class="btn btn-outline-primary" @click="handleClick">进入专栏</button>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, computed, onMounted, onUpdated } from 'vue';
interface DataProps {
  doubles: number;
  nubmers: Array<number>;
}
export default {
  name: 'hello',
  setup() {
    const count = ref(0);
    onMounted(() => {
      console.log('onMounted :>> ');
    });
    onUpdated(() => {
      console.log('onUpdated :>> ');
    });
    const handleClick = () => {
      count.value++;
      data.nubmers.push(count.value);
    };
    const data: DataProps = reactive({
      doubles: computed(() => count.value * 2),
      nubmers: [0, 1, 2, 3],
    });
    const refData = toRefs(data);
    return { count, ...refData, handleClick };
  },
};
</script>
